<template>
  <div class="seller-item-edit">
    <el-form ref="form" class="form" :model="itemDetail" label-width="100px">
      <el-row>
        <div class="item-main-box">
          <img :src="itemDetail.itemMainImg" class="item-main-img" />
        </div>
        <el-col :span="14" :offset="5">
          <el-form-item label="上下架">
            <el-radio v-model="itemDetail.itemShelf" :label="1">上架</el-radio>
            <el-radio v-model="itemDetail.itemShelf" :label="0">下架</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="14" :offset="5">
          <el-form-item label="商品主图">
            <el-input v-model="itemDetail.itemMainImg"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14" :offset="5">
          <el-form-item label="商品名称">
            <el-input v-model="itemDetail.itemName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14" :offset="5">
          <el-form-item label="列表展示价格">
            <el-input-number
              v-model="itemDetail.price"
              :precision="0"
              :step="1"
              :min="0"
              :max="9999999"
            ></el-input-number>
            <span class="fee">{{itemDetail.price | formatPrice}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="SKU属性">
            <div class="sku-box" v-for="(sku, index) in itemDetail.skus" :key="index">
              <el-card class="box-card" v-if="!sku.delete">
                {{sku.delete}}
                <!-- 删除SKU -->
                <el-button
                  style="float: right;"
                  icon="el-icon-close"
                  circle
                  @click="deleteSku(index)"
                ></el-button>
                <!-- 外部编码 -->
                <div class="sku-item">
                  <div class="sku-name">
                    <span>外部编码</span>
                  </div>
                  <div class="sku-attr">
                    <el-input v-model="sku.outCode"></el-input>
                  </div>
                </div>
                <!-- 库存 -->
                <div class="sku-item">
                  <div class="sku-name">
                    <span>商品库存</span>
                  </div>
                  <div class="sku-attr">
                    <el-input-number
                      v-model="sku.stockQuantity"
                      :precision="0"
                      :step="1"
                      :min="0"
                      :max="99999"
                    ></el-input-number>
                  </div>
                </div>
                <!-- SKU列表 -->
                <div
                  class="sku-item"
                  v-for="(attrValue, attrKey, attrIndex) in sku.skuAttr"
                  :key="attrIndex"
                >
                  <div class="sku-name">
                    <span>{{attrKey}}</span>
                  </div>
                  <div class="sku-attr">
                    <el-input v-model="sku.skuAttr[attrKey]"></el-input>
                  </div>
                </div>
                <!-- SKU价格 -->
                <div class="sku-price">
                  价格
                  <el-input-number
                    v-model="sku.price"
                    :precision="0"
                    :step="1"
                    :min="0"
                    :max="9999999"
                  ></el-input-number>
                  <span class="fee">{{sku.price | formatPrice}}</span>
                </div>
              </el-card>
            </div>
            <div>
              <el-button @click="addSku">新增SKU</el-button>
            </div>
          </el-form-item>
        </el-col>
        <el-col :span="14" :offset="5">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="goBack">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "seller-item-edit",
  components: {},
  data() {
    return {
      itemId: this.$route.params.itemId,
      type: this.$route.params.type,
      itemDetail: {
        skus: []
      }
    };
  },
  computed: {},
  methods: {
    deleteSku(index) {
      // 删除sku
      console.log(index);
      let sku = this.itemDetail.skus[index];
      let skuId = this.itemDetail.skus[index].id;
      if (skuId) {
        // 如果数据库中存在，做删除操作
        sku.delete = true;
        this.$set(this.itemDetail.skus, index, sku);
      } else {
        // 如果数据库中不存在，直接删除数组
        this.itemDetail.skus.splice(index, 1);
      }
    },
    addSku() {
      // 添加sku
      this.itemDetail.skus.push({
        itemId: this.itemId,
        outCode: "",
        price: 0,
        stockQuantity: 0,
        skuAttr: {
          规格: "",
          颜色: ""
        }
      });
    },
    onSubmit() {
      console.log(this.itemDetail);
      if (this.type === "edit") {
        this.$api.item.editItem(this.itemDetail).then(res => {
          this.$message.success("编辑商品信息成功");
          this.getItemDetail();
        });
      } else {
        this.$api.item.addItem(this.itemDetail).then(res => {
          this.$message.success("新增商品成功");
          this.goBack();
        });
      }
    },
    goBack() {
      this.$router.push({ path: "/seller/itemmanage" });
    },
    getItemDetail() {
      this.$api.item.getItemDetail({ itemId: this.itemId }).then(res => {
        this.itemDetail = res.data.itemDetail;
        console.log(this.itemDetail);
      });
    }
  },
  created() {
    if (this.type === "edit") {
      this.getItemDetail();
    }
  }
};
</script>

<style lang="scss" scoped>
.seller-item-edit {
  .form {
    .item-main-box {
      margin-bottom: 20px;
      text-align: center;
      .item-main-img {
        width: 80px;
        height: 80px;
      }
    }
    .sku-box {
      margin-top: 15px;
      .sku-item {
        width: 55%;
        display: inline-block;
        .sku-name {
          width: 30%;
          display: inline-block;
        }
        .sku-attr {
          width: 54%;
          display: inline-block;
        }
      }
      .sku-price {
        width: 40%;
        display: inline-block;
      }
    }
    .fee {
      margin-left: 10px;
    }
  }
}
</style>